<template>
    <div>
        <div class="top_box container_box">
            <p class="page-title font-weight-500">审批列表
                <el-tooltip class="item"
                            effect="dark"
                            content="刷新"
                            placement="right">
                    <el-button class="refresh-btn"
                               icon="el-icon-refresh"
                               type="primary"
                               circle
                               plain
                               @click="getTableData"
                               size="mini"></el-button>
                </el-tooltip>
            </p>
            <el-tabs v-model="queryData.onlineStatus">
                <el-tab-pane label="请假审批"
                             name="1"></el-tab-pane>
                <el-tab-pane label="代课审批"
                             name="0"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="padding_box">
            <div class="container_box">
                <div class="order_title">
                    审批列表
                </div>
                <el-divider></el-divider>
                <el-table v-loading="loading"
                          :data="tableData"
                          stripe
                          class="my_table"
                          ref="multipleTable"
                          header-cell-class-name="table-header">
                    <!-- <el-table-column prop="id"
                                     label="教师id"
                                     width="80">
                    </el-table-column> -->
                    <el-table-column prop=""
                                     label="请假课程"
                                     align="center">
                        <template slot-scope="scope">
                            <curriculum-card :cardData="scope.row"></curriculum-card>
                        </template>
                    </el-table-column>
                    <el-table-column label="请假教师"
                                     prop="teacherName"
                                     align="center">
                        <template slot-scope="scope">
                            <!-- <business-card :cardData="scope.row.cardData"></business-card> -->
                            <p>{{ scope.row.teacherName }}</p>
                            <p>{{ scope.row.teacherPhone }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop=""
                                     label="请假时间"
                                     align="center">
                        <template slot-scope="scope">
                            {{ scope.row.leaveTime }}
                        </template>
                    </el-table-column>
                    <el-table-column prop=""
                                     label="请假事由"
                                     align="center">
                        <template slot-scope="scope">
                            {{ scope.row.reason }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="queryData.onlineStatus == '0'"
                                     prop="content"
                                     label="上课内容"
                                     align="center">
                        <template slot-scope="scope">
                            <p>{{ scope.row.content }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="queryData.onlineStatus == '0'"
                                     prop=""
                                     label="代课老师"
                                     align="center">
                        <template slot-scope="scope">
                            <p>{{ scope.row.temporaryTeacherName }}</p>
                            <p>{{ scope.row.temporaryTeacherPhone }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"
                                     fixed="right"
                                     width="180"
                                     align="center">
                        <template slot-scope="scope">
                            <el-button size="mini"
                                       type="success"
                                       @click="adopt(scope.row.id)">通过</el-button>
                            <el-button size="mini"
                                       type="warning"
                                       @click="refuse(scope.row.id)">拒绝</el-button>
                            <!-- <el-button size="mini"
                                       type="primary"
                                       @click="UserDetails(scope.row)">详情</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background
                                   layout="total, prev, pager, next,sizes, jumper"
                                   :current-page="queryData.pageIndex"
                                   :page-size="queryData.pageSize"
                                   :page-sizes="[5, 10, 20, 40]"
                                   :total="pageTotal"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <!-- 添加弹出框 -->
        <el-dialog title="修改学生"
                   :visible.sync="showEdit"
                   width="50%">
            <el-form :model="currentEditUser"
                     label-width="120px">
                <el-form-item label="昵称">
                    <el-input type="text"
                              maxlength="10"
                              show-word-limit
                              v-model="currentEditUser.studuentName"></el-input>
                </el-form-item>
                <el-form-item label="家长昵称">
                    <el-input type="text"
                              maxlength="10"
                              show-word-limit
                              v-model="currentEditUser.parentName"></el-input>
                </el-form-item>
                <el-form-item label="家长手机号码"
                              prop="userName">
                    <el-input type="tel"
                              oninput="value=value.replace(/[^\d]/g,'')"
                              v-model="currentEditUser.parentPhone"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="currentEditUser.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="班级">
                    <el-cascader clearable
                                 filterable
                                 :show-all-levels="false"
                                 separator=">"
                                 placeholder="请选择班级"
                                 :options="classList"
                                 :props="{ expandTrigger: 'hover', checkStrictly: false, value:'id',label:'name',children:'subCategory', }">
                        <template slot-scope="{ node, data }">
                            <!-- checkStrictly 是否显示前面可选圆框 -->
                            <span>{{ data.name }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.subCategory.length }}) </span>
                        </template>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="showEdit = false">取 消</el-button>
                <el-button type="primary"
                           @click="saveEditUser"
                           v-preventClick>确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import businessCard from '@/components/business-card/business-card.vue'
import curriculumCard from '@/components/curriculum-card/curriculum-card.vue'

export default {
    name: 'basetable',
    components: {
        businessCard, curriculumCard
    },
    data() {
        return {
            pageTotal: 0,
            loading: false,
            tableData: [
                { id: 1, curriculumName: '金话筒主持人', address: '教学楼302', teacherName: '王老师', teacherPhone: '17886932551', time: '16:00 ~ 16:45', grade: '一年级', reason: '个人私事，需要请假', leaveTime: '10-30 ~ 10-31', temporaryTeacherName: '王老师', temporaryTeacherPhone: '15362546665', content: '口语训练，语速调节' },
                { id: 2, curriculumName: '篮球', address: '篮球场A1', teacherName: '张老师', teacherPhone: '17886932551', time: '16:00 ~ 16:45', grade: '二年级', reason: '个人私事，需要请假', leaveTime: '10-30 ~ 10-31', temporaryTeacherName: '王老师', temporaryTeacherPhone: '15362546665', content: '球场上运球三要素' },
                { id: 3, curriculumName: '少儿编程', address: '实训楼202', teacherName: '马老师', teacherPhone: '17886932551', time: '16:00 ~ 16:45', grade: '三年级', reason: '个人私事，需要请假', leaveTime: '10-30 ~ 10-31', temporaryTeacherName: '王老师', temporaryTeacherPhone: '15362546665', content: '了解编程思想' },
                { id: 4, curriculumName: '书法', address: '图书馆302', teacherName: '李老师', teacherPhone: '17886932551', time: '16:00 ~ 16:45', grade: '四年级', reason: '个人私事，需要请假', leaveTime: '10-30 ~ 10-31', temporaryTeacherName: '王老师', temporaryTeacherPhone: '15362546665', content: '硬笔书法练字' },
                { id: 5, curriculumName: '羽毛球', address: '羽毛球场A2', teacherName: '孔老师', teacherPhone: '17886932551', time: '16:00 ~ 16:45', grade: '一年级', reason: '个人私事，需要请假', leaveTime: '10-30 ~ 10-31', temporaryTeacherName: '王老师', temporaryTeacherPhone: '15362546665', content: '羽毛球比赛' },
                { id: 6, curriculumName: '乒乓球', address: '乒乓球场B2', teacherName: '彭老师', teacherPhone: '17886932551', time: '16:00 ~ 16:45', grade: '五年级', reason: '个人私事，需要请假', leaveTime: '10-30 ~ 10-31', temporaryTeacherName: '王老师', temporaryTeacherPhone: '15362546665', content: '乒乓球对角防守' },
                { id: 7, curriculumName: '足球', address: '足球场A2', teacherName: '黄老师', teacherPhone: '17886932551', time: '16:00 ~ 16:45', grade: '六年级', reason: '个人私事，需要请假', leaveTime: '10-30 ~ 10-31', temporaryTeacherName: '王老师', temporaryTeacherPhone: '15362546665', content: '球场上如何协调传球' },
                { id: 8, curriculumName: '漫画', address: '教学楼101', teacherName: '刘老师', teacherPhone: '17886932551', time: '16:00 ~ 16:45', grade: '一年级', reason: '个人私事，需要请假', leaveTime: '10-30 ~ 10-31', temporaryTeacherName: '王老师', temporaryTeacherPhone: '15362546665', content: '苹果素描' },
            ],
            classList: [
                {
                    id: 1, name: '一年级',
                    subCategory: [
                        { id: 11, name: '一年一班', },
                        { id: 12, name: '一年二班', },
                        { id: 13, name: '一年三班', },
                        { id: 14, name: '一年四班', },
                        { id: 15, name: '一年五班', },
                    ]
                },
                {
                    id: 2, name: '二年级',
                    subCategory: [
                        { id: 21, name: '二年一班', },
                        { id: 22, name: '二年二班', },
                        { id: 23, name: '二年三班', },
                        { id: 24, name: '二年四班', },
                        { id: 25, name: '二年五班', },
                    ]
                },
                {
                    id: 3, name: '三年级',
                    subCategory: [
                        { id: 31, name: '三年一班', },
                        { id: 32, name: '三年二班', },
                        { id: 33, name: '三年三班', },
                        { id: 34, name: '三年四班', },
                        { id: 35, name: '三年五班', },
                    ]
                },
                {
                    id: 4, name: '四年级',
                    subCategory: [
                        { id: 41, name: '四年一班', },
                        { id: 42, name: '四年二班', },
                        { id: 43, name: '四年三班', },
                        { id: 44, name: '四年四班', },
                        { id: 45, name: '四年五班', },
                    ]
                },
                {
                    id: 5, name: '五年级',
                    subCategory: [
                        { id: 51, name: '五年一班', },
                        { id: 52, name: '五年二班', },
                        { id: 53, name: '五年三班', },
                        { id: 54, name: '五年四班', },
                        { id: 55, name: '五年五班', },
                    ]
                },
                {
                    id: 6, name: '六年级',
                    subCategory: [
                        { id: 61, name: '六年一班', },
                        { id: 62, name: '六年二班', },
                        { id: 63, name: '六年三班', },
                        { id: 64, name: '六年四班', },
                        { id: 65, name: '六年五班', },
                    ]
                },
            ],
            queryData: {
                pageNum: 1,
                pageSize: 10,
                onlineStatus: '1',
            },

            showEdit: false,
            currentEditUser: {},
        };
    },
    watch: {

    },
    filters: {

    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            var _this = this;
            this.loading = true
            axios({
                url: "/user/listUser",
                method: "post",
                data: this.queryData,
            }).then(res => {
                if (res.code == 0) {
                    // _this.tableData = res.result.list;
                    // _this.pageTotal = res.result.total;
                }
                this.loading = false;
            }).catch(err => {
                this.loading = false;
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.queryData.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryData.pageNum = val
            this.getTableData()
        },
        //用户详情
        UserDetails(row) {
            this.$router.push({ path: '/UserDetails', query: { userId: row.id } });
        },
        adopt(currentUser) {
            // this.currentEditUser = currentUser
            // this.showEdit = true
            this.$confirm('确定要通过吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.$message.success('已通过');
                // axios({
                //     url: "/api-admin/product/" + row.id,
                //     method: "delete"
                // }).then(result => {
                //     this.$message.success(result.resp_msg != '' ? result.resp_msg : '成功');
                //     if (result.resp_code == 0) {
                //         this.tableData.splice(index, 1);
                //     }
                // })
            }).catch(() => { });
        },
        saveEditUser() {
            axios({
                url: "/user/update",
                method: "post",
                data: this.currentEditUser,
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.errMsg || '修改成功')
                    this.showEdit = false
                    this.getTableData()
                } else {
                    this.$message.error(res.errMsg || '修改失败')
                }

            }).catch(err => {

            })
        },
        // 删除用户
        refuse(id) {
            this.$confirm('确定要拒绝？', '提示', {
                type: 'warning'
            }).then(() => {
                this.$message.success('已拒绝')
                // let data = {
                //     id: id,
                // }
                // axios({
                //     url: "/user/delete",
                //     method: "POST",
                //     data
                // }).then(result => {
                //     if (result.code == 0) {
                //         this.$message.success(result.errMsg || '修改成功')
                //         this.getTableData()
                //     } else {
                //         this.$message.error(result.errMsg || '修改失败')
                //     }
                // })
            }).catch(() => {
            })
        },
    }
};
</script>

<style lang="scss" scoped >
.top_box {
    background-color: #fff;
    padding-bottom: 0;
    ::v-deep {
        .el-tabs__header {
            margin: 0;
        }
        .el-tabs__item {
            color: #999;
            &.is-active {
                color: #1b93f8;
            }
        }
    }
}
.my-switchStyle {
    margin-right: 25px;
}
.my-switchStyle {
    ::v-deep {
        .el-switch__label {
            position: absolute;
            display: none;
            color: #fff;
        }
        .el-switch__label--left {
            z-index: 9;
            left: 6px;
        }
        .el-switch__label--right {
            z-index: 9;
            left: -16px;
        }
        .el-switch__label.is-active {
            display: block;
        }
        .el-switch__label * {
            font-size: 12px;
        }
        .el-switch__core,
        .el-switch__label {
            width: 52px !important;
        }
    }
}
</style>
<style lang="scss">
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}
</style>
